var videomarkers = [];


var iframe_markdown = 0;

var mindmap_jsonData;

var graphnodes_jsonData;

var graphedges_jsonData;

var flag_render = false;

var isAnalysisCompleted = checkVideoAnalysisStatus();

var mainSummaryhtml;

var tempSummaryhtml;

var mainSummaryhtml2;

var tempSummaryhtml2;

var mainSummaryhtml3;

var tempSummaryhtml3;

var mainSummaryhtml4;

var tempSummaryhtml4;


document.addEventListener('DOMContentLoaded', function () {




   
    if(isAnalysisCompleted == false){
        loadinghtml()
    }
    else{

        mindmap_jsonData = JSON.parse(localStorage.getItem("treejson"))

        
    
        graphnodes_jsonData = JSON.parse(localStorage.getItem("nodejson"))
    
        graphedges_jsonData = JSON.parse(localStorage.getItem("edgejson"))
    
        mindmap_jsonData = JSON.parse(mindmap_jsonData)
    
        graphnodes_jsonData = JSON.parse(graphnodes_jsonData)
    
        graphedges_jsonData = JSON.parse(graphedges_jsonData)
    
        markersGet(mindmap_jsonData)

        temploadinghtml()

    setTimeout(function() {

        tempSummaryhtml.style.display = 'none';

        mainSummaryhtml.style.display = 'block'

        const graphButton = document.getElementById("graph_button");
        const mindmapButton = document.getElementById("mindmap_button");
        const blackboard_button = document.getElementById("blackboard_button");
        const contentContainer = document.getElementById("contentContainer");


        mindmapButton.addEventListener("click", function () {

   
        
        
            //变换按钮颜色
            mindmapButton.className = 'temp_button_style'
        
            graphButton.className = 'graph_button'
            
            blackboard_button.className = 'markdown_button'

            temploadinghtml2()

            if(tempSummaryhtml3){
                tempSummaryhtml3.style.display = 'none'
            }
            if(tempSummaryhtml4){
                tempSummaryhtml4.style.display = 'none'
            }

            setTimeout(function() {

                tempSummaryhtml2.style.display = 'none';

                mainSummaryhtml2.style.display = 'block'

                var childToRemove1 = document.getElementById("subContainer1");
                var childToRemove2 = document.getElementById("subContainer2");
                // 移除特定的子元素
                if (childToRemove1) {
                    contentContainer.removeChild(childToRemove1);
                }
                if (childToRemove2) {
                    contentContainer.removeChild(childToRemove2);
                }
                if (iframe_markdown != 0){
                    iframe_markdown.style.display = "none";
                }
                
                // 定义边框颜色
                contentContainer.style.borderColor = '#c1edf7'
                contentContainer.style.borderStyle = "groove"
                contentContainer.style.borderWidth = "3px"
                contentContainer.style.width = "92%"
                contentContainer.style.left = "4%"
                contentContainer.style.borderRadius = "10px"

                
                renderMindMap(mindmap_jsonData);

            },2000)

            
            

        });
        // 添加点击事件处理程序，渲染graph
        graphButton.addEventListener("click", function () {

            //变换按钮颜色
            graphButton.className = 'temp_button_style'
        
            mindmapButton.className = 'mindmap_button'

            blackboard_button.className = 'markdown_button'

            temploadinghtml3()

            if(tempSummaryhtml2){
                tempSummaryhtml2.style.display = 'none'
            }
            if(tempSummaryhtml4){
                tempSummaryhtml4.style.display = 'none'
            }

            setTimeout(function() {

                tempSummaryhtml3.style.display = 'none';

                mainSummaryhtml3.style.display = 'block'

                var childToRemove1 = document.getElementById("subContainer1");
                var childToRemove2 = document.getElementById("subContainer2");
                // 移除特定的子元素
                if (childToRemove1) {
                    contentContainer.removeChild(childToRemove1);
                }
                if (childToRemove2) {
                    contentContainer.removeChild(childToRemove2);
                }
                if (iframe_markdown != 0){
                    iframe_markdown.style.display = "none";
                }


                contentContainer.style.borderColor = '#c1edf7'
                contentContainer.style.borderStyle = "groove"
                contentContainer.style.borderWidth = "3px"
                contentContainer.style.width = "92%"
                contentContainer.style.left = "4%"
                contentContainer.style.borderRadius = "10px"

                renderGraph(graphnodes_jsonData,graphedges_jsonData);

            },2000)

            

        });

        blackboard_button.addEventListener("click",function(){
            let container = document.getElementById("contentContainer");
            
            blackboard_button.className = 'temp_button_style'
        
            mindmapButton.className = 'mindmap_button'
            
            graphButton.className = 'graph_button'

            temploadinghtml4()

            if(tempSummaryhtml2){
                tempSummaryhtml2.style.display = 'none'
            }
            if(tempSummaryhtml3){
                tempSummaryhtml3.style.display = 'none'
            }

            setTimeout(function() {

                tempSummaryhtml4.style.display = 'none';

                mainSummaryhtml4.style.display = 'block';

                container.style.borderWidth = "0px"
            var childToRemove1 = document.getElementById("subContainer1");
            var childToRemove2 = document.getElementById("subContainer2");
            // 移除特定的子元素
            if (childToRemove1) {
                container.removeChild(childToRemove1);
            }
            if (childToRemove2) {
                container.removeChild(childToRemove2);
            }

        

            if(iframe_markdown == 0){
                iframe_markdown = document.createElement('iframe');
                container.style.border = "none"
                container.style.width = "98%"
                container.style.left = "1%"
                iframe_markdown.style.border = "none";

                iframe_markdown.id = "iframe_markdown"
                iframe_markdown.src = '../html/mainconcept.html';
                iframe_markdown.style.position = "absolute"
                iframe_markdown.style.height = "100%"
                iframe_markdown.style.width = "100%"
                iframe_markdown.style.border = "none"
                container.appendChild(iframe_markdown);
            }
            else{
                iframe_markdown.style.border = "none";
                container.style.border = "none"
                iframe_markdown.style.display = "block";
            }
            
            },1500)

            

        });

            
        }, 200); // 200毫秒

    
    }
});


//思维导图渲染函数
function renderMindMap(jsonData){

    var container_map = document.getElementById("contentContainer");
    var max_lines = 0;
    var nodes_convert = new vis.DataSet();
    var edges_convert = new vis.DataSet();

    // 模拟 JSON 数据
    function countDots(inputString) {
      // 使用正则表达式匹配字符串中的点号，并返回匹配的个数
      var matches = inputString.match(/\./g);
      if (matches) {
        return matches.length;
      } else {
        return 0;
      }
    }

    function convertJsonToVisData(jsonData, parentNodeId) {
        var nodes = [];
        var edges = [];

        for (var i = 0; i < jsonData.length; i++) {
            var node = jsonData[i];
            var nodeId = node.id;
            // var label = node.key_words;
            var href = node.href; // 添加链接属性
            var start_time = node.start_time;
            var class_num = 4-countDots(nodeId);
            var level = 4 - class_num;
            var keyWords= node.key_words;
            var colors = ["#d5ebe3","#fceaea","#c3ddf6","#87ab69","#75975e","#658354"]
            var label = ''; // 初始化 label

            for (var k = 0; k < keyWords.length; k++) {
                label += keyWords[k];
                var temp_max_lines = 0;
                if (((k + 1) % 8 === 0)&&k<keyWords.length-2) {
                    label += '\n'; // 在每6个字符后添加一个换行符
                    temp_max_lines += 1;
                    if(temp_max_lines > max_lines){
                        max_lines = temp_max_lines;
                    }
                }
            }
            if(max_lines < 1){
                max_lines = 1;
            }

            nodes.push({ level:level,id: nodeId, label: label, href: href ,start_time: start_time,class_num:class_num});
            videomarkers.push({time : start_time, text : label})
           
            if (parentNodeId) {
                
                edges.push({ from: parentNodeId, to: nodeId ,class_num:class_num,level:level});
            }

            if (node.children && node.children.length > 0) {
                var childData = convertJsonToVisData(node.children, nodeId);
                nodes = nodes.concat(childData.nodes);
                edges = edges.concat(childData.edges);
            }
        }

        return { nodes: nodes, edges: edges };
    }

    
    
    var visData = convertJsonToVisData([jsonData], null);


    //将json数据转化适合渲染的数据对象
    function data_convert(visData){
        var nodes = visData.nodes
        var edges = visData.edges
        var colors_div = ['#d5ebe3','#fceaea','#c3ddf6','#87ab69','#75975e','#658354']
        var colors_div2 = ['#9ab69f','#decece','#c3ddf6','#87ab69','#75975e','#658354']
        
        //节点数据转化
        for(let i = 0; i < nodes.length; i++){
            let node = nodes[i];
            let node_convert ={
                id:node.id,
                level:node.level,
                label:node.label,
                href:node.href,
              
                start_time : node.start_time,
                color: {
                    border: colors_div2[node.level],
                    background: colors_div[node.level],
                    highlight: {
                    border: '#',
                    background: '#ffd81b'
                    }
                },
                
                scaling: {
                    min: 10,
                    max: 440,
                    label: {
                    enabled: false,
                    min: 554,
                    max: 3550,
                    maxVisible: 3550,
                    drawThreshold:5
                    },
                },
                title: "点击可跳转",
                font: {
            
                    size: node.class_num * 12, // 字体大小
                    color: 'black', // 字体颜色
                    face: 'Arial' ,// 字体类型
                    
                    bold:true,
                    multi: false,
                    vadjust: 5,
                    mod: 'bold'
             
                },
                shape:'box',
                
            }
            nodes_convert.add(node_convert);
        }

        //边数据转化
        for(let i = 0; i < edges.length; i++){
            let edge = edges[i];
            let edge_convert ={
                from:edge.from,
                to:edge.to,
                length:100,
                color:{
                    color:colors_div2[edge.level-1],
                   
                },
                width:edge.class_num *5,
                smooth: {
                    type: "cubicBezier",
                    forceDirection: "horizontal",
                    
                  },
                
               
            }
            edges_convert.add(edge_convert);
        }
    }

    //转化数据
    data_convert(visData);
    // 创建 Vis Network 数据对象
    var data_mind = {
        nodes: nodes_convert,
        edges: edges_convert
    };


    var layout = {
        hierarchical: {
            direction: "LR", // 默认从左到右布局
            levelSeparation: max_lines * 550,  

                 
        },  
    };

    var subContainer1 = document.createElement("div");
    subContainer1.id = "subContainer1";
    subContainer1.style.width = "100%";
    subContainer1.style.height = "100%";
    container_map.appendChild(subContainer1);

    /* 创建子容器 */
    var subContainer2_1 = document.createElement("div");
    var subContainer2_2 = document.createElement("div");
    subContainer2_1.className = "graph_tips"

    subContainer2_1.textContent = "Tips:点击节点可跳转至视频相应位置！"
    subContainer2_1.style.color = "#00ddf7"; // 设置文本颜色
    subContainer2_1.style.fontWeight = "bold"; // 设置加粗
    subContainer2_1.style.fontSize = "20px"; // 设置字体大小

    subContainer2_2.style.width = "100%";
    subContainer2_2.style.height = "95%";
    


    subContainer1.appendChild(subContainer2_1);
    subContainer1.appendChild(subContainer2_2);


    window.network = new vis.Network(subContainer2_2, data_mind,{layout});




    // 添加事件监听器，以在节点被单击时打开链接
    network.on("click", function (params) {
        if (params.nodes.length > 0) {
            var selectedNodeId = params.nodes[0];
            var selectedNode = data_mind.nodes.get(selectedNodeId);
            var startTime = selectedNode.start_time;
        

            // 阻止默认行为，防止导航到链接地址
        
            // 跳转到视频时间
            jumpToVideoTime(startTime);
            }
        });

    function jumpToVideoTime(jumpTime) {

      

        localStorage.setItem('jumpTime', JSON.stringify(jumpTime));


       
    } 
}
    


function renderGraph(nodes,edges){

    //定义数据转变后的节点和边数据集合
    var nodes_convert = new vis.DataSet();
    var edges_convert = new vis.DataSet();

  
    function data_convert(nodes,edges)
    {
        var index_key1,index_key2;
        var nodes_key1 = [];
        var nodes_key2 = [];
        index_key1 = edges[0]['to'];
        index_key2 = -1;
        var flag = 0;
        for(let j=0;j<edges.length;j++){
            let temp = edges[j]['to'];
            if(temp == index_key1){
                nodes_key1.push(edges[j]['from']);
                
            }
            else{
                nodes_key2.push(edges[j]['from']);
            }
            if(temp != index_key1 && flag==0){
                index_key2 = temp;
                flag = 1;
            }
            
            
        }

    
        //var colors_div = ['#9dd4d1','#9ac49b','#b2cf87','#a5def1','#f4d8df']
        var colors_div = ['#a5def1','#9ac49b','#9ac49b','#a5def1','#f4d8df']
        for(let i=0;i<nodes.length;i++){
            let node = nodes[i];
            let index = node['id']
            node.fontsize = 25;

            var keyWords= node.label;
            if(keyWords.length >= 4){
                node.fontsize = 17
            }
            var label = ''; // 初始化 label
            for (var k = 0; k < keyWords.length; k++) {
                label += keyWords[k];
                
                if (((k + 1) % 3 == 0)&&(k != 0)&&(flag_render == false)) {

                    if( keyWords.length !=3 && k != 5){

                        label += '\n'; // 在每6个字符后添加一个换行符

                    }
                    
                }
            }

            node.label = label
           
            node.borderDashes = false;
            node.borderDashes = [2, 10]
         
            node.bordercolor = '#a5d9d7'
            node.hover = {
                color: {
                    background: 'yellow',
                }
            };

            if(index == index_key1){
              
                node.color = colors_div[0]
                node.fontsize =  '30'
                node.shape = 'circle'
                node.borderWidth = 10
                node.borderWidthSelected = 15
                node.bordercolor = '#feec6e'
                
            }
            else if(index == index_key2){
               
                node.color = colors_div[1]
                node.fontsize = '30'
                node.shape = 'circle'
                node.borderWidth = 10
                node.borderWidthSelected = 15
                node.bordercolor = '#71e8d2'
            }
            else{
                if(nodes_key1.indexOf(index)==-1)
                {
                    node.color = colors_div[3];
                }
                else{
                    if(nodes_key2.indexOf(index) != -1){
                        node.color = colors_div[4];
                    }
                    else{
                        node.color = colors_div[2];
                    }
                    
                }
            }

            var node_convert = {
                id: node.id,
                label: node.label,
                // shape:'circle',
                shape: node.shape,
                borderWidth: 0.5,
                borderWidthSelected: 3,
                
                title: "双击可查看相关知识点",

                color: {
                    background: node.color,
                    highlight: {
                    border: '#',
                    background: '#ffd81b'
                    }
                },
                font: {
                    size: node.fontsize, // 字体大小
                    color: 'black', // 字体颜色
                    face: 'Arial' ,// 字体类型
                    
                    bold:true,
                    
                    strokeWidth: 0, // px
                    strokeColor:'#fcf4ab',
                    
                    multi: false,
                    vadjust: 5,
             
                },
                
                
                };
            nodes_convert.add(node_convert); // 将节点添加到节点数组中
                
            }


        for(let k=0;k<edges.length;k++){
            let edge = edges[k];
            let edge_color;
            if(edge.to == index_key1){
                edge_color = '#9cc6a2'
            }
            else{
                edge_color = '#50a7c2'
            }
            
            var edge_convert = {
                from:edge.from,
                to:edge.to,
                width: 5,
                
                color: { color: edge_color, highlight: '#313866' }, 
                
                arrows: {
                    to: {
                      enabled: true, 
                      scaleFactor: 0.5, 
                      type: 'bar'
                    },
                       
                  },

            
                chosen:Object,
                chosen:{
                    edge: function(values, id, selected, hovering){
                        values.toArrowType = 'circle';
                    }
                },
                smooth: { enabled: true, type: 'dynamic' },
        
            };
            
            edges_convert.add(edge_convert);

        }
    }
    data_convert(nodes,edges)
    flag_render = true;
    // 获取用于渲染图形的容器
    var container = document.getElementById("contentContainer");
    // 构建图形数据
    var data2 = {
        nodes: nodes_convert,
        edges: edges_convert
    };

    // 设置图形展示选项
    var options = {
     
        physics: {
            enabled: true
        },
        interaction: {
            hover: true, // Enable hover interaction
        }
        
    };



    function related_video(label){

        let iframe = document.createElement('iframe');
        iframe.src = '../html/relatedvideos.html'; // 设置 iframe 的 src 属性为要加载的 HTML 文件的 URL
        // 设置 iframe 样式
        iframe.id = 'relatedvideos'
        iframe.style.width = '700px';
        iframe.style.height = '600px'; // 设置 iframe 高度，根据需要调整
        iframe.style.border = 'none'; // 去掉 iframe 边框
        iframe.style.position = 'absolute'
        iframe.style.left = '10%'
        iframe.style.top = '5%'
        iframe.style.zIndex = 10000;

        var myDiv = window.parent.document.getElementById("playermaincontainer");

        myDiv.appendChild(iframe)
   

        setTimeout(function() {
            localStorage.setItem('related_video', JSON.stringify(label));
        }, 500);
        
    }

    var subContainer2 = document.createElement("div");
    subContainer2.id = "subContainer2";
    subContainer2.style.width = "100%";
    subContainer2.style.height = "100%";
    container.appendChild(subContainer2);
    
    /* 创建子容器 */
    var subContainer2_1 = document.createElement("div");
    var subContainer2_2 = document.createElement("div");
    subContainer2_1.className = "graph_tips"

    subContainer2_1.textContent = "Tips:双击节点可以查看相关视频!"
    subContainer2_1.style.color = "#00ddf7"; // 设置文本颜色
    subContainer2_1.style.fontWeight = "bold"; // 设置加粗
    subContainer2_1.style.fontSize = "20px"; // 设置字体大小
    subContainer2_2.style.width = "100%";
    subContainer2_2.style.height = "95%";
    


    subContainer2.appendChild(subContainer2_1);
    subContainer2.appendChild(subContainer2_2);


    
    try {
        window.network = new vis.Network(subContainer2_2, data2, options);
        // 将双击事件绑定到节点
        network.on("doubleClick",function(params){
            
            if (params.nodes.length > 0) {
                var selectedNodeId = params.nodes[0];
                var selectedNode = data2.nodes.get(selectedNodeId);
                
                related_video(selectedNode.label)
                }

        });
    } catch (error) {
        console.error("Error initializing vis.js network:", error);
    }
          
}

function loadinghtml(){


    var myDiv = document.getElementById("summarizehtml");

    var iframe = document.createElement('iframe');
    iframe.src = '../html/analyzing.html'; // 设置 iframe 的 src 属性为要加载的 HTML 文件的 URL
    // 设置 iframe 样式
    iframe.id = 'analyzingHtml'
    iframe.style.width = '100%';
    iframe.style.height = '100%'; // 设置 iframe 高度，根据需要调整
    iframe.style.border = 'none'; // 去掉 iframe 边框
    iframe.style.position = 'absolute'
    myDiv.innerHTML = ""
 
    myDiv.appendChild(iframe);

    // myDiv.innerHTML = '<object type="text/html" data="../html/analyzing.html" ></object>';
    // var xhttp = new XMLHttpRequest();
    // xhttp.onreadystatechange = function() {
    // if (this.readyState == 4 && this.status == 200) {
    //     myDiv.innerHTML = this.responseText;
    // }
    // };
    // xhttp.open("GET", "../html/analyzing.html", true);
    // xhttp.send();

}


// 检查视频是否成功分析完成的状态
function checkVideoAnalysisStatus() {
    // 检查localStorage中是否存在名为videoAnalysisCompleted的标志
    const videoAnalysisCompleted = localStorage.getItem('videoAnalysisCompleted');

    // 如果标志存在且为true，则表示视频分析完成
    if (videoAnalysisCompleted && videoAnalysisCompleted === 'true') {
        return true;
    } else {
        return false;
    }
}

// 设置视频成功分析完成的状态
function setVideoAnalysisStatus(completed) {
    // 将标志存储在localStorage中
    localStorage.setItem('videoAnalysisCompleted', completed.toString());
}


function markersGet(jsonData){

    var container_map = document.getElementById("contentContainer");
    var max_lines = 0;
    var nodes_convert = new vis.DataSet();
    var edges_convert = new vis.DataSet();

    // 模拟 JSON 数据
    function countDots(inputString) {
      // 使用正则表达式匹配字符串中的点号，并返回匹配的个数
      var matches = inputString.match(/\./g);
      if (matches) {
        return matches.length;
      } else {
        return 0;
      }
    }

    function convertJsonToVisData(jsonData, parentNodeId) {
        var nodes = [];
        var edges = [];

        for (var i = 0; i < jsonData.length; i++) {
            var node = jsonData[i];
            var nodeId = node.id;
            // var label = node.key_words;
            var href = node.href; // 添加链接属性
            var start_time = node.start_time;
            var class_num = 4-countDots(nodeId);
            var level = 4 - class_num;
            var keyWords= node.key_words;
            var colors = ["#d5ebe3","#fceaea","#c3ddf6","#87ab69","#75975e","#658354"]
            var label = ''; // 初始化 label

            for (var k = 0; k < keyWords.length; k++) {
                label += keyWords[k];
                var temp_max_lines = 0;
                if (((k + 1) % 8 === 0)&&k<keyWords.length-2) {
                    label += '\n'; // 在每6个字符后添加一个换行符
                    temp_max_lines += 1;
                    if(temp_max_lines > max_lines){
                        max_lines = temp_max_lines;
                    }
                }
            }
            if(max_lines < 1){
                max_lines = 1;
            }

            nodes.push({ level:level,id: nodeId, label: label, href: href ,start_time: start_time,class_num:class_num});
            videomarkers.push({time : start_time, text : label})
           
            if (parentNodeId) {
                
                edges.push({ from: parentNodeId, to: nodeId ,class_num:class_num,level:level});
            }

            if (node.children && node.children.length > 0) {
                var childData = convertJsonToVisData(node.children, nodeId);
                nodes = nodes.concat(childData.nodes);
                edges = edges.concat(childData.edges);
            }
        }

        return { nodes: nodes, edges: edges };
    }

    
    
    var visData = convertJsonToVisData([jsonData], null);

    window.postMessage({ type: 'videomark', data: videomarkers }, '*');


    // localStorage.setItem('videomark', JSON.stringify(videomarkers));
    // console.log("打点调试1");

}

function temploadinghtml(){

    mainSummaryhtml = document.getElementById("summarizehtml");

    tempSummaryhtml = document.createElement("div");

    tempSummaryhtml.className = 'container';

    mainSummaryhtml.parentNode.appendChild(tempSummaryhtml)

    mainSummaryhtml.style.display = 'none';

    tempSummaryhtml.style.display = 'block';

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        tempSummaryhtml.innerHTML = this.responseText;
    }
    };
    xhttp.open("GET", "../html/loading.html", true);
    xhttp.send();
    
    
}

function temploadinghtml2(){

    mainSummaryhtml2 = document.getElementById("contentContainer");

    tempSummaryhtml2 = document.createElement("div");

    tempSummaryhtml2.style.width = '90%';

    tempSummaryhtml2.style.height = '82.5%';

    tempSummaryhtml2.style.top = '15.5%';

    tempSummaryhtml2.style.left = '5%';

    tempSummaryhtml2.style.position = 'fixed';

    mainSummaryhtml2.parentNode.appendChild(tempSummaryhtml2)

    mainSummaryhtml2.style.display = 'none';

    tempSummaryhtml2.style.display = 'block';

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        tempSummaryhtml2.innerHTML = this.responseText;
    }
    };
    xhttp.open("GET", "../html/loading.html", true);
    xhttp.send();
    
    
}


function temploadinghtml3(){

    mainSummaryhtml3 = document.getElementById("contentContainer");

    tempSummaryhtml3 = document.createElement("div");

    tempSummaryhtml3.style.width = '90%';

    tempSummaryhtml3.style.height = '82.5%';

    tempSummaryhtml3.style.top = '15.5%';

    tempSummaryhtml3.style.left = '5%';

    tempSummaryhtml3.style.position = 'fixed';

    mainSummaryhtml3.parentNode.appendChild(tempSummaryhtml3)

    mainSummaryhtml3.style.display = 'none';

    tempSummaryhtml3.style.display = 'block';

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        tempSummaryhtml3.innerHTML = this.responseText;
    }
    };
    xhttp.open("GET", "../html/loading.html", true);
    xhttp.send();
    
    
}

function temploadinghtml4(){

    mainSummaryhtml4 = document.getElementById("contentContainer");

    tempSummaryhtml4 = document.createElement("div");

    tempSummaryhtml4.style.width = '90%';

    tempSummaryhtml4.style.height = '82.5%';

    tempSummaryhtml4.style.top = '15.5%';

    tempSummaryhtml4.style.left = '5%';

    tempSummaryhtml4.style.position = 'fixed';

    mainSummaryhtml4.parentNode.appendChild(tempSummaryhtml4)

    mainSummaryhtml4.style.display = 'none';

    tempSummaryhtml4.style.display = 'block';

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        tempSummaryhtml4.innerHTML = this.responseText;
    }
    };
    xhttp.open("GET", "../html/loading.html", true);
    xhttp.send();
    
    
}